<template>
  <div class="table-tree-box">
    <div class="table-tree-search-box">
      <el-input class="search-input" placeholder="请输入目录名称" v-model="filterText" @change="handleSearch">
        <template #suffix>
          <i style="cursor: pointer;" class="el-icon-search" @click="handleSearch"></i>
        </template>
      </el-input>
    </div>

    <el-tree
      ref="tree"
      :props="props"
      :data="data"
      node-key="baseId"
      :load="loadNode"
      lazy
    >
      <div
        class="node-custom flex"
        :class="treeClickNode && treeClickNode.id == node.id ? 'node-active':''"
        slot-scope="{ node, data }"
        @click.stop="handleNodeClick(node,data)"
        :filter-node-method="filterNode"
      >
        <span class="textoverflow node-label">{{ data.baseName }}</span>
      </div>
    </el-tree>
  </div>
</template>

<script>
import {getDatasourceJdbcList, getDatasourceListPage} from "@/api/operationManage/basicInfo/datasourceManage";

export default {
  name: "index",
  props:{
    doubleClicking: {
      //可双击
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      filterText: '',
      data: [],
      props: {
        label: 'baseName',
        children: 'children',
        isLeaf: 'leaf'
      },
      treeClickNode:null,
      timer: null, //计时器双击、单击事件
    }
  },
  methods: {
    handleSearch() {
      this.$refs.tree.filter(this.filterText)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.baseName.indexOf(value) !== -1
    },
    // 单击
    handleNodeClick(node, data) {
      this.treeClickNode = node
      clearTimeout(this.timer) //清除未执行的定时器
      this.timer = setTimeout(() => {
        // node.expanded = !node.expanded
        this.$emit('nodeClick', node, data)
      }, 100)
    },
    // 双击
    handleNodeDbClick(node, data) {
      if (!this.doubleClicking) return
      clearTimeout(this.timer) //清除未执行的定时器
      this.treeRightClickNode = node
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        // 查询数据源
        getDatasourceListPage().then(res => {
          let list = res.obj.content
          resolve(list)
        })
      }

      if (node.level === 1) {
        // 查询表
        getDatasourceJdbcList(node.data.baseId).then(res => {
          let list = Object.values(res.obj)
          list = list.map(item => {
            return {baseId: item.name, baseName: item.name, leaf: item.columns.length == 0, columns: item.columns}
          })
          resolve(list)
        })
      }

      if (node.level === 2) {
       // 查询字段
        let list = Object.values(node.data.columns)
        list = list.map(item=>{
          return {baseId: item.name, baseName: item.name, leaf:true}
        })
        resolve(list)
      }
    },
  }
}
</script>

<style scoped lang="scss">

.table-tree-box {

  .table-tree-search-box {
    padding: 10px;

    ::v-deep .el-input__suffix {
      color: #3184FF;
    }

    ::v-deep .el-input--medium .el-input__inner {
      height: 36px !important;
      line-height: 36px !important;
      font-size: 14px !important;
    }

    ::v-deep .el-input--medium .el-input__icon {
      line-height: 36px !important;
      display: none;
    }
  }

  .menu-header-box {
    padding: 10px;
    cursor: pointer;

    &:hover {
      background-color: #3184FF;

      .menu-title-line {
        background-color: #FFFFFF !important;
      }

      .menu-title {
        color: #FFFFFF !important;
      }
    }
  }

  .menu-header-left {
    display: flex;
    align-items: center;

    .menu-title-line {
      display: inline-block;
      width: 4px;
      height: 16px;
      background-color: #3184FF;
      border-radius: 2px;
    }

    .menu-title {
      margin-left: 10px;
      font-size: 16px;
      font-weight: bold;
      color: #333333;
    }

    .menu-title-active {
      color: #3184FF !important;
    }
  }


  ::v-deep .el-tree {
    background-color: transparent !important;
  }

  ::v-deep .el-tree-node__content {
    height: 32px;
  }

  .treeMenu {
    position: fixed;
    z-index: 99999;
    top: 50%;
    left: 50%;
    background-color: transparent;
    overflow: hidden;
    //border-radius: 5px;
    border: 1px solid #e6ebf5;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

    div {
      padding: 3px 20px;
      box-sizing: border-box;
      //width: 50px;
      text-align: center;
    }

    div:hover {
      background-color: #eee;
      cursor: pointer;
    }
  }

  .node-input {
    padding: 0;
    width: 100%;
    height: 36px;
    line-height: 36px;

    ::v-deep .el-input__inner {
      height: 36px;
      line-height: 36px;
      color: #3184FF;
      border: none;
      background-color: transparent;
      padding: 0;
    }
  }

  .node-custom {
    width: 100%;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .node-action {
      visibility: hidden;
      cursor: pointer;
    }

    i {
      display: inline-block;
      width: 17px;
      height: 17px;
      cursor: pointer;
    }

    .i-edit {
      width: 17px;
      height: 17px;
      background-image: url(~@/assets/images/menu-edit.png);
      background-size: 100% 100%;
    }

    .i-add {
      width: 15px;
      height: 15px;
      background-image: url(~@/assets/images/menu-add.png);
      background-size: 100% 100%;
    }

    .i-del {
      width: 15px;
      height: 15px;
      background-image: url(~@/assets/images/menu-del.png);
      background-size: 100% 100%;
    }

  }

  .node-active {
    color: #3184FF;
  }

  ::v-deep .el-tree-node__content {
    &:hover {
      background-color: #3184FF;
      color: #FFFFFF;

      .node-label {
        flex: 1;
        width: 0;
      }

      .node-custom {
        color: #FFFFFF;
      }

      .node-action {
        visibility: visible;
      }

      .el-input__inner {
        color: #FFFFFF;
      }

    }

    .node-label {
      display: inline-block;
      width: 100%
    }

    .node-action {
      align-items: center;
      justify-content: end;
      width: 70px;
    }

  }
}

</style>


<style scoped lang="scss">
.table-tree-box {

  .search-input {
    ::v-deep .el-input__suffix-inner {
      position: absolute;
      right: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
    color: #999999 !important;
  }

  ::v-deep .is-leaf::before {
    display: none;
  }

  //::v-deep .el-tree-node__expand-icon.expanded {
  //  -webkit-transform: rotate(0deg);
  //  transform: rotate(0deg);
  //}
  //
  //// 没有展开且有子节点
  //::v-deep .el-icon-caret-right:before {
  //  background: url("~@/assets/images/icon-menu-add.png") no-repeat 0 0;
  //  content: '';
  //  display: block;
  //  width: 17px;
  //  height: 17px;
  //  font-size: 16px;
  //  background-size: 16px;
  //}
  //
  //// 已经展开且有子节点
  //::v-deep .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  //  background: url("~@/assets/images/icon-menu-del.png") no-repeat 0 0;
  //  content: '';
  //  display: block;
  //  width: 17px;
  //  height: 17px;
  //  font-size: 16px;
  //  background-size: 16px;
  //}
  //
  //// 没有子节点
  //::v-deep .el-tree-node__expand-icon.is-leaf::before {
  //  //background: url("~@/assets/images/icon-menu-del.png") no-repeat 0 3px;
  //  background: none;
  //  content: '';
  //  display: block;
  //  width: 0;
  //  height: 0;
  //  font-size: 16px;
  //  background-size: 16px;
  //}

  // 选中行高亮显示
  ::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    //color: $moaMainColor;
  }

  // 文字长度超出容器宽度换行显示
  ::v-deep .el-tree-node__content {
    height: auto;
    line-height: 28px;

    .el-tree-node__label {
      white-space: break-spaces !important;
    }
  }

}
</style>
